<template>
  <div id="sysMenu">
    <div class="layout-logo-left">
      <router-link to="/">
        <span v-if="spanLeft >= 4">
          <img src="../assets/images/logo.png" alt="">
        </span>
        <span v-if="spanLeft < 4">IVA</span>
      </router-link>
    </div>
    <div class="layout-user-info">
      <!-- <Poptip v-model="userInfoVisible">
        <a><img src="../assets/images/avatar.jpg" alt=""></a>
        <div slot="title"><i>用户信息</i></div>
        <div slot="content">
            <a @click="userInfoVisible = false">退出</a>
        </div>
      </Poptip> -->
      <Dropdown @on-click="handleUserDropdown" class="right">
        <img src="../assets/images/avatar.jpg" alt="avatar">
        <br>
        <a href="javascript:void(0)">
          {{user.username}}
          <Icon type="arrow-down-b"></Icon>
        </a>
        <Dropdown-menu slot="list">
            <Dropdown-item name="logout">注销</Dropdown-item>
        </Dropdown-menu>
      </Dropdown>
    </div>
    <Menu
      id="sysMenu"
      :class="{'layout-hide-text': spanLeft < 4}"
      :active-name="activeMenu"
      theme="light"
      width="auto"
      @on-select="handleSelect"
      accordion>
      <template v-for="(menu, index) in menuList">

        <Menu-item
          v-if="menu.subMenu === null || menu.subMenu === undefined || menu.subMenu.length === 0"
          :name="menu.path">
            <Icon :type="menu.icon" :size="iconSize"></Icon>
            <span class="layout-text">{{menu.name}}</span>
        </Menu-item>

        <Submenu :name="index + 1"  v-if="menu.subMenu.length > 0">
          <template slot="title">
            <Icon :type="menu.icon" :size="iconSize"></Icon>
            <span class="layout-text">{{menu.name}}</span>
          </template>
          <Menu-item
            :name="subMenu.path"
            v-for="(subMenu, subIndex) in menu.subMenu"
            :key="subMenu.id">
              <Icon :type="subMenu.icon" :size="iconSize"></Icon>
              <span class="layout-text">{{subMenu.name}}</span>
          </Menu-item>
        </Submenu>

      </template>
    </Menu>
  </div>
</template>
<script>
export default {
  props: {
    iconSize: {
      required: true,
      type: Number
    },
    spanLeft: {
      required: true,
      type: Number
    },
    sid: {
      type: String,
      default: 'f043a1edddc5477bbf82cd3261778cd5'
    }
  },
  data () {
    return {
      user: sessionStorage.getItem('user') ? JSON.parse(sessionStorage.getItem('user')) : {},
      userInfoVisible: false
    };
  },
  name: 'sysMenu',
  mounted () {
    this.$nextTick(() => {
      this.getMenus();
    });
  },
  computed: {
    activeMenu () {
      return this.$route.path;
    },
    menuList () {
      return this.$store.state.app.menus;
    }
  },
  methods: {
    getMenus () {
      // this.$http.get(sysApis.sys.menu.tree, {
      //   params: {
      //     sid: this.sid
      //   }
      // }).then(response => {
      //   if (response.body.success) {
      //     this.menuList = response.body.obj;
      //     sessionStorage.setItem('system.menus', JSON.stringify(response.body.obj));
      //   } else {
      //     this.$Modal.error({
      //       title: '提示',
      //       content: response.body.msg
      //     });
      //   }
      // }, response => {
      //   this.$Modal.error({
      //     title: '提示',
      //     content: '网络不通，请稍后再试！'
      //   });
      // });
      this.$store.dispatch('getMenus', this.sid).then(() => {
      }).catch(err => {
        this.$Message.error(err.msg);
        this.loginLoading = false;
      });
    },
    handleSelect (name) {
      this.$router.push(name);
    },
    handleUserDropdown (name) {
      switch (name) {
        case 'logout':
          this.$Modal.confirm({
            title: '注销',
            content: '确定退出系统？',
            onOk: () => {
              sessionStorage.clear();
              this.$router.push('/');
            }
          });
          break;
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.ivu-menu-item {
  border-right: none;
}
.ivu-menu-item-selected {
  background-color: #DBDBDB;
}
</style>
